import { PROJECT_NAME } from '@/constants';
import { createFromIconfontCN } from '@ant-design/icons';
import { LoginForm } from '@ant-design/pro-components';
import { Helmet } from '@umijs/max';
import { QRCode, Space, Typography } from 'antd';
import React from 'react';
import Settings from '../../../../config/defaultSettings';
import './custom.css';
import useStyles from './index.style';

const Login: React.FC = () => {
  const { styles } = useStyles();

  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_4870840_0v57wayx38w.js',
  });

  return (
    <div className={styles.container}>
      <Helmet>
        <title>
          {'登录'}- {Settings.title}
        </title>
      </Helmet>
      <div
        style={{
          flex: '1',
        }}
      >
        <LoginForm
          contentStyle={{
            minWidth: 320,
            maxWidth: '75vw',
          }}
          logo={<img alt="logo" src="/logo.svg" />}
          title={
            <a href={'/'} className={'text-[#22CFEE]'}>
              {PROJECT_NAME}
            </a>
          }
          submitter={false}
        >
          <div
            className={'flex-col items-center flex justify-center bg-white rounded-2xl pt-4 pb-4'}
          >
            <Space direction={'horizontal'} align={'center'} size={8} className={'text-sm m-5'}>
              <Typography.Text type={'secondary'}>写完毕设出去看一看春天吧~</Typography.Text>
            </Space>
            <div className={'text-center'}>
              <QRCode
                value={
                  'https://open.weixin.qq.com/connect/qrconnect?appid=wxe4d7a0e597f8ff70&scope=snsapi_login&redirect_uri=https://www.javaxmsz.cn/jump&state=mystate'
                }
                errorLevel={'L'}
                type="svg"
              />
            </div>
            <Space direction={'horizontal'} align={'center'} size={8} className={'text-sm m-5'}>
              <IconFont type={'icon-wechat'} />
              使用微信扫码登录
            </Space>
            <Space direction={'horizontal'} align={'center'} size={2} className={'text-xs m-4'}>
              <Typography.Text type={'secondary'}>注册登录即表示同意</Typography.Text>
              <Typography.Link href={'#'}>用户协议</Typography.Link>
              <Typography.Text type={'secondary'}>和</Typography.Text>
              <Typography.Link href={'#'}>隐私政策</Typography.Link>
            </Space>
          </div>
        </LoginForm>
      </div>
    </div>
  );
};
export default Login;
